<!-- pages/appointment/appointment.vue -->
<template>
	<view class="appointment page-container">
		<view class="ssss"  style="margin-bottom:30rpx ;"> 
				<text class="elegant-title">我的预约</text>
		</view>
	
		
		<!-- 预约列表 -->
		<view class="appointments-list">
			<view v-for="(item, index) in appointments" 
				  :key="index" 
				  class="appointment-card">
				<view class="appointment-header">
					<text class="appointment-date">剧本名称：{{item.jbs.title}}</text>
					<text class="appointment-status" :class="statusMap[item.status].class">
						{{statusMap[item.status].text}}
					</text>
				</view>

				<view class="appointment-content">

					<view class="info-row">
						<text class="label">联系电话：</text>
						<text class="value">{{item.phone}}</text>
					</view>
          <view class="info-row" v-if="item.bz">
            <text class="label">剧本简介：</text>
            <text class="value">{{item.jbs.desc}}</text>
          </view>
					<view class="info-row" v-if="item.bz">
						<text class="label">备注：</text>
						<text class="value">{{item.bz}}</text>
					</view>

          <button class="action-btn primary-btn" @click="quxiao(item.id)" v-if="status==0">
            <text class="iconfont icon-calendar"></text>
            <text>取消预约</text>
          </button>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="!appointments.length">
				<text>暂无预约记录</text>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/api/config.js'

export default {
	data() {
		return {
			appointments: [],
      status:null,
			statusMap: {
				0: { text: '未开始', class: 'status-pending' },
				1: { text: '已完成', class: 'status-received'},
				2: { text: '已取消', class:  'status-shipping' }
			}
		}
	},
	
	onShow(options) {

	},


  onLoad(options) {
    this.status = options.status
    this.loadAppointments()
  },
	methods: {
    quxiao(id){
      uni.showModal({
        title: '提示',
        content: '确定要取消预约吗？',
        success: (res) => {
          debugger
          if (res.confirm) {
            const token = uni.getStorageSync('token')
            uni.request({
              url:API.RESERVE_quxiao+id ,
              method: 'GET',
              header: {
                'Authorization': token
              },
              success: (res) => {
                uni.showToast({
                  title: '取消成功',
                  icon: 'success'
                })
                this.loadAppointments()
              },
              fail: () => {
                uni.showToast({
                  title: '取消失败',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    },
		loadAppointments() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}
      let api = API.RESERVE_USER;
      if (this.status != null){
        api = API.RESERVE_STATUS +this.status
      }
			uni.request({
				url: api,
				method: 'GET',
				header: {
					'Authorization': token
				},
				success: (res) => {
					if (res.data.code === 200) {
						this.appointments = res.data.data
					} else {
						uni.showToast({
							title: res.data.message || '加载失败',
							icon: 'none'
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			})
		}
	},

}

</script>

<style scoped>
.appointment {
	padding: 30rpx;
	min-height: 100vh;
	background: #000000;
}

.elegant-title {
	font-size: 36rpx;
	color: #ffffff;
	margin-bottom: 30rpx;
	text-align: center;
	font-weight: 400;
	letter-spacing: 2px;
}

.appointment-card {
	margin-bottom: 30rpx;
	padding: 40rpx;
	background: #111111;
	border-radius: 16rpx;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-date {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 400;
	letter-spacing: 1px;
}

.appointment-status {
	padding: 8rpx 24rpx;
	border-radius: 24rpx;
	font-size: 24rpx;
	letter-spacing: 1px;
}

.status-pending {
	background: rgba(255, 152, 0, 0.1);
	color: #FF9800;
	border: 1px solid rgba(255, 152, 0, 0.3);
}

.status-shipping {
	background: rgba(33, 150, 243, 0.1);
	color: #2196F3;
	border: 1px solid rgba(33, 150, 243, 0.3);
}

.status-received {
	background: rgba(76, 175, 80, 0.1);
	color: #4CAF50;
	border: 1px solid rgba(76, 175, 80, 0.3);
}

.appointment-content {
	font-size: 28rpx;
}

.info-row {
	display: flex;
	margin-bottom: 20rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.label {
	color: rgba(255, 255, 255, 0.5);
	width: 160rpx;
	font-size: 26rpx;
}

.value {
	color: rgba(255, 255, 255, 0.9);
	flex: 1;
	font-size: 26rpx;
	letter-spacing: 0.5px;
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 28rpx;
	letter-spacing: 1px;
}

/* 添加微妙的悬停效果 */
.appointment-card {
	transition: all 0.3s ease;
}

.appointment-card:active {
	transform: scale(0.98);
	background: #161616;
}

/* 优化滚动条 */
::-webkit-scrollbar {
	width: 0;
	background: transparent;
}
</style>